<template>
    <el-row id="progressForProjectInfoContainer">
        <el-row>
            <el-card class="box-card" style="">
                <div slot="header" class="clearfix" style="">
                    <el-row>
                        <el-col :span="24">
                            <el-col :span="2" style="margin-left:10px;margin-top:15px;font-size:14px">
                                <span>进程管理</span>

                            </el-col>
                            <el-col :span="1">
                                <div style="font-size:30px;height:40px">
                                    <el-divider direction="vertical"></el-divider>
                                </div>
                            </el-col>
                            <el-col :span="20" style="margin-left:10px;margin-top:-5px;font-size:14px">
                                <span style="width:30px"></span>
                                <el-tabs style="" v-model="activeName" @tab-click="changeComponent">
                                    <el-tab-pane label="甘特图" name="myGantt">
                                        <!-- <gantt class="left-container"></gantt> -->
                                    </el-tab-pane>
                                    <el-tab-pane label="里程碑" name="milepost">
                                    </el-tab-pane>
                                    <el-tab-pane label="里程碑" name="task">
                                    </el-tab-pane>
                                </el-tabs>
                            </el-col>

                        </el-col>
                    </el-row>

                </div>
                <el-row>
                    <component :is="componentCode"></component>
                </el-row>
            </el-card>
        </el-row>

    </el-row>
</template>
<script>
// 甘特图组件
import myGantt from './myGantt'
import milepost from './milepost'
import task from './task'
export default {
    name: 'progressForProjectInfo',
    components: {
        myGantt,
        milepost,
        task
    },
    data() {
        return {
            componentCode: 'myGantt',
            activeName: 'first'
        }
    },

    mounted() {

    },
    methods: {
        changeComponent(tab, event) {
            console.log(tab.name)
            this.componentCode = tab.name
        }
    }
}
</script>
<style  scoped>
.left-container {
    height: 600px;
}
#progressForProjectInfoContainer >>> div.el-card__header {
    background: #f7f7f7;
    height: 50px !important;
    line-height: 5px;
    border-bottom: 1px solid #d3d3d3 !important;
    /* padding: 10px !important; */
}
#progressForProjectInfoContainer >>> div.el-card__header {
    padding: 0px !important;
}
</style>
